<template>
	<view >
		<view v-if="lest==0" >
			<u-navbar
				:autoBack="false"
				leftIconColor="rgba(255, 255, 255, 1)"
				:placeholder="false"
				bgColor="rgba(243, 243, 243, 0)"
				@leftClick="leftClick"
			>
			
			</u-navbar>
			<headerVue :cur="datas"></headerVue>
			<view class="tabs">
				<u-tabs :current="tab_id" :scrollable="false" :list="list_tab" @click="click1" lineColor="rgba(0, 0, 0, 1)"
					activeStyle="color:rgba(0, 0, 0, 1)" lineWidth="60rpx"></u-tabs>
				<u-line margin="-9rpx" :hairline="false"></u-line>
			</view>
		</view>
		<u-navbar v-else
			:autoBack="false"
			:placeholder="true"
			bgColor="rgba(243, 243, 243, 0)"
			@leftClick="leftClick"
		/>
		
		<view style="margin-left: 52.3rpx;margin-right: 52.3rpx;; margin-bottom: 10rpx;">
			<u--text lineHeight="33" size="18px" :text="content[lest]"></u--text>
			<view style="margin-top: 10px;margin-bottom: 10px;" v-if="image.length>=lest+1">
				<u--image :src="oss_host+image[lest]" width="100%" @click="click_swiper(image[lest])" ></u--image>
			</view>
			
		</view>
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop" top="300"></u-back-top>
		</view>
		<view style="width: 100%; height: 80rpx;"></view>
		<!-- 第一页 -->
		<view class="fan1" v-if="lest==0">{{lest+1}}/{{length}}</view>
		<!-- 第二页开始 -->
		<view class="fan" v-else>{{lest+1}}/{{length}}</view>
		<view v-if="lest==0">
			<view v-if="length==1">
				<button class="button">首页</button>
				<button class="button">尾页</button>
			</view>
			<view v-if="length>=2">
				<view v-if="lest==0">
					<button class="button">首页</button>
					<button  class="button" @click="lest+=1">下一页</button>
				</view>
			</view>
		</view>
		<u-tabbar v-else
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			:border="false"
		>
		<view v-if="length==1">
			<button class="button">首页</button>
			<button class="button">尾页</button>
		</view>
		<view v-if="length>=2">
			<view v-if="lest==0">
				<button class="button">首页</button>
				<button  class="button" @click="lest+=1">下一页</button>
			</view>
			<view v-else-if="lest+1==length">
				<button  class="button" @click="lest-=1">上一页</button>
				<button class="button">尾页</button>
			</view>
			<view v-else>
				<button  class="button" @click="lest-=1">上一页</button>
				<button  class="button" @click="lest+=1">下一页</button>
			</view>
			<view style="height: 10px; width: 200px;"></view>
		</view>
		</u-tabbar>
	</view>
	
</template>

<script>
	import { oss_host } from '../../utils/appInfo'
	import headerVue from './header.vue'
	export default{
		components: {
			headerVue
		},
		data(){
			return {
				scrollTop: 0,
				tab_id: 0,
				oss_host:oss_host,
				content:[],
				image:[],
				datas:{},
				length:0,
				_id:-1,
				lest:0,
				list_tab: [{
					name: '人物简介'
				}, {
					name: '人物关系'
				}, {
					name: '相关视频'
				}, {
					name: '人物相册'
				}],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(res) {
			this._id=res.id
			this.api.getProfileInfo({id:this._id}).then(res=>{
				// console.log(res.data)
				this.image=res.data.image
				this.length=res.data.content.length
				for(let i=0;i<res.data.content.length;i++){
					this.content[i]=res.data.content[i].replace(/<[^>]*>/g, '')
				}
			})
			this.api.getIndex({id:this._id}).then(res=>{
				this.datas=res.data
				uni.setNavigationBarTitle({
					title:this.datas.name+"的简介"
				})
			})
		},
		methods:{
			click1(item) {
				console.log(item)
				this.tab_id = item.index
				if(this.tab_id>0){
					uni.navigateTo({
						url:"./index1?id="+this._id+"&tab_id="+this.tab_id
					})
				}
				// if(this.tab_id==0){
				// 	uni.navigateTo({
				// 			url:"./introduction?id="+this._id
				// 		})
				// }
			},
			leftClick() {
				if(this.lest>0){
					this.lest=0
				}else{
					uni.navigateTo({
						url:"index?id="+this._id
					})
				}
			},
			click_swiper(url){
				let urls=[]
					urls.push(this.oss_host+url)
				uni.previewImage({
						urls:urls,
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		height: 50rpx;
	}
	.fan{
		background-color: #ffffff;
	    text-align: center;
	    position: fixed;
		width: 100%;
		bottom: 0; /* 吸底设置 */
		height: 220rpx; /* 底部吸底区域的高度 */

	}
	.fan1{
	    text-align: center;
	 //    position: absolute;
		// width: 100%;
		// bottom: 0; /* 吸底设置 */
		// height: 180rpx; /* 底部吸底区域的高度 */
	
	}
	.tabs {
		margin-top: 680rpx;
		margin-left: 33rpx;
		margin-right: 33rpx;
		margin-bottom: 30rpx;
		background-color: rgba(255, 255, 255, 1);
	}
	.tab{
		margin-top: 19rpx;
		border-collapse: collapse;
		width: 100%;
		height: 427rpx;
	}
	.button{
		border-radius: 20px;
		background:rgba(60, 154, 252, 1);
		color: rgba(255, 255, 255, 1);
		width: 375rpx;
		float: left;
	}
</style>